<template>
    <div>
        <div class="w100 h-50 bgff rowsc rowsm br-16 fs-16 col333 fw-b mt-20 mb-16">劳动总结报告</div>

<div class="w100 bgff br-16 p-all-20 mb-20">
<div class="fs-20 col333 fw-b mb-10">简要说明：</div>
<el-input
type="textarea"
:rows="4"
placeholder="请输入您的劳动说明"
class="input"
 v-model="info">
</el-input>
</div>

<div class="w100 bgff br-16  pl-20 pr-20 trt mb-40"  style="padding: 20px">
<div class="fs-20 col333 fw-b" style="text-align: left; ">附件上传：</div>
<el-upload
ref="upload"
class="upload-demo"
:action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
:show-file-list="true"
:multiple="false"
:limit="6"
:on-success="uploadSuccess"
:on-error="uploadErr"
:on-remove="delFile"
:before-upload="beforeUpload"
 :disabled="isUploadSuccess"
accept=".doc, .docx, .pdf, .xls, .xlsx, .jpg, .jpeg, .png, .mov, .avi"
>
<div class="rows rowsm">
  <img src="../../../static/img/icon_sc.png" class="w-30 h-30" alt="">
  <div class="fs-20 col888">（可上传word、pdf、excel、图片）</div>
</div>
<p class="mark">附件总上传不超过10M（每张图片大小建议不超过1M）</p>
</el-upload>

</div>

<div class="w100 rowsc rowsm">
<el-button  type="primary" 
        class="w-400 h-60 br-30 fs-24" 
        style="background-color: #E33636;border:none;font-size:22px;border-radius: 30px;" 
        :disabled="isUploadSuccess"
        @click="submit"
      >提交</el-button>
    </div>
     </div>
  </template>
  
  <script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        info:'',
        file:'',
        fileName:'',
        fileType:'',
        proFileList:[],
        isUploadSuccess:false,
        totalSize: 0,
      };
    },
    watch: {},
    computed: {},
    methods: {
       delFile(file){
      this.proFileList = this.proFileList.filter(item => item.file != file.response.url)
         this.totalSize = this.totalSize - file.size
    },
     beforeUpload(file){
      this.isUploadSuccess = true
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.warning('上传的文件大小不能超过 100MB!');
        this.isUploadSuccess = false
      }
       if (this.totalSize + file.size  > 6 * 1024 * 1024) {
         this.$message.warning('所有文件总大小不能超过 6MB!');
         this.isUploadSuccess = false;
         return false;
       }
      return isLt100M;
    },
      submit(){
        if(!this.info) return this.$notify({title: '提示',message: '请输入内容'});
        if(this.proFileList.length == 0) return this.$notify({title: '提示',message: '请上传文件'});

        
        let data = {
          content:this.info,
          file:this.file,
          fileType:this.fileType,
          fileName:this.fileName,
          proFileList:this.proFileList
        }

        this.$axios.post('proldzj/add',{...data}).then(res => {
          this.$notify({
          title: '提示',
          message: res.data.msg
        });
        if(res.data.code != 200) return 
         setTimeout(() => {
          this.info = ''
          this.file = ''
          this.fileName = ''
          this.fileType = ''
          this.proFileList = []
          this.$refs.upload.clearFiles()
        },1000)
        
        })
      },
      uploadSuccess(response, file, fileList){
       if(response.code == 200){
      console.log('success');
      console.log(response, file, fileList)
      this.proFileList.push({
        file:response.url,
        fileName:response.originalFilename,
        fileType:file.raw.type.split('/')[0] == 'image' ? file.raw.type.split('/')[0] : 'file',
        size: file.size,
      })
     this.calculateTotalSize();
     this.$message.success('上传成功');
     this.isUploadSuccess = false
    }else{
      fileList.splice(fileList.indexOf(file),1);
      this.$notify({title: '提示',message: response.msg || '上传失败'});
      this.isUploadSuccess = false
    }
      },
      calculateTotalSize() {
        this.totalSize = this.proFileList.reduce((acc, item) => {
          return acc + item.size;
        }, 0);
      },
      uploadErr(err, file, fileList){
        console.log('err');
        console.log(err, file, fileList)
      }
    },
    created() {},
    mounted() {}
  };
  </script>
  <style lang="scss" scoped>
  .input /deep/ .el-input__inner  {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 20px;
    text-align: right;
  }
  </style>